<template>
  <f7-page>
    <f7-navbar title="指令下发" back-link="Back"></f7-navbar>
    <f7-block-title>{{command.name}}</f7-block-title>
        <f7-list form v-for="(formView,index) in formViews"  :key="index">
          <f7-list-item v-if="formView.type=='input'">
            <f7-label>{{formView.label}}</f7-label>
            <f7-input  type="text" :placeholder="formView.label" value="" @input="form[formView.name] = formView.value = $event.target.value"></f7-input>
          </f7-list-item>
            <f7-list v-if="formView.type=='radio'">
              <f7-list-item v-for="item in formView.options"
              radio
              :title="item.label"
              :value="item.value"
              :name="formView.name"
              @change="form[formView.name] = Number($event.target.value)"
              ></f7-list-item>
            </f7-list>
            <f7-list-item v-if="formView.type=='select'" :title="formView.label" smart-select :smart-select-params="{openIn: 'sheet'}">
            <select :name="formView.name" @change="form[formView.name] = $event.target.value">
              <option v-for="item in formView.options" :value="item.value">{{item.label}}</option>
            </select>
          </f7-list-item>
          <f7-list-item :header="formView.label" v-if="formView.type=='input-number'" :title="` ${formView.value}`">
           <f7-stepper
             :min="10"
             :max="1800"
             :step="1"
             :value="form[formView.name] = formView.value"
             :buttons-only="true"
             small
             slot="after"
             @stepper:change="(value) => formView.value=value"
           ></f7-stepper>
         </f7-list-item>


        </f7-list>
        <f7-block>
          <f7-row tag="p">
            <f7-button class="col"  fill raised color="blue" @click="commandSend">发送</f7-button>
          </f7-row>
        </f7-block>
  </f7-page>
</template>

<script>
import { sendCommand } from '@/api/api';
export default {
  data: function() {
          return {
              id:0,
              command:{},
              formViews:[],
              form:{}
          }
        },
  methods:{

        render(){
            this.command =  this.$store.state.dict.commandViews[this.id];
            this.formViews = JSON.parse(this.command.view)
            console.log(this.formViews);
        },
        commandSend(){
          this.form.id=Number(this.id);
          this.form.deviceId=this.$store.state.devices.selectId;
          console.log(this.form);
          sendCommand(this.form).then((res) => {
            this.$f7.toast.create({
               text: '发送成功',
               closeTimeout: 2000,
             }).open();
					 });
        }

  },
  created(){

  },
  mounted () {
    this.id = this.$f7route.query.id;
    this.render();
    },
    beforeDestroy() {

    }
}
</script>
<style>

</style>
